package com.example.finalhomework.thirdhomework

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import com.example.finalhomework.R

@Composable
fun MainScreen_3(
    navController: NavHostController, // 导航控制器，用于处理导航操作
    receivedMessage: String, // 接收到的消息
    mainScreenMessage: String, // 主屏幕的消息
    onMessageChange: (String) -> Unit // 消息变化时的回调函数
) {
    // 使用 remember 保存输入的消息状态
    var message by remember { mutableStateOf(mainScreenMessage) }

    val buttonWidth = 200.dp // 设置按钮的固定宽度
    val roundedCornerShape = RoundedCornerShape(16.dp) // 设置圆角形状
    val commonTextStyle = TextStyle(fontSize = 16.sp)
    Column(
        modifier = Modifier
            .fillMaxSize() // 填充整个屏幕
            .padding(16.dp), // 设置内边距为16dp
        horizontalAlignment = Alignment.CenterHorizontally // 水平居中排列
    ) {
        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白
        Image(
            painter = painterResource(id = R.drawable.background8),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .height(150.dp)
        )

        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白

        // 输入框，用于输入消息
        OutlinedTextField(
            value = message, // 输入框的当前值
            onValueChange = {
                message = it // 更新输入框的值
                onMessageChange(it) // 调用回调函数，传递新的消息
                Log.d("MainScreen_3", "Message changed: $it")
            },
            label = { Text("Please input something", style = commonTextStyle) }, // 输入框的标签
            shape = roundedCornerShape // 设置圆角形状
        )
        Spacer(modifier = Modifier.height(20.dp)) // 间隔16dp的空白
        // 按钮，点击后导航到 SecondActivity，并传递输入的消息
        Button(
            onClick = {
                navController.navigate("secondactivity/$message")
                Log.d("MainScreen_3", "Navigating to Second Screen with message: $message")
            },
            modifier = Modifier.width(buttonWidth) // 设置按钮宽度
        ) {
            Text("Second Screen", style = commonTextStyle) // 按钮上的文本
        }
        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白

        // 显示接收到的消息，如果没有接收到消息则显示 "No input returned"
        Text(text = if (receivedMessage.isEmpty()) "No input returned" else receivedMessage, style = commonTextStyle)
        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白

        // 按钮，点击后导航到 ThirdActivity
        Button(
            onClick = {
                navController.navigate("thirdactivity")
                Log.d("MainScreen_3", "Navigating to Third Screen")
            },
            modifier = Modifier.width(buttonWidth) // 设置按钮宽度
        ) {
            Text("Third Screen", style = commonTextStyle) // 按钮上的文本
        }
        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白

        // 按钮，点击后导航到 FourthActivity
        Button(
            onClick = {
                navController.navigate("fourthactivity")
                Log.d("MainScreen_3", "Navigating to Fourth Screen")
            },
            modifier = Modifier.width(buttonWidth) // 设置按钮宽度
        ) {
            Text("Fourth Screen", style = commonTextStyle) // 按钮上的文本
        }
        Spacer(modifier = Modifier.height(16.dp)) // 间隔16dp的空白

        // 按钮，点击后导航到 FifthActivity
        Button(
            onClick = {
                navController.navigate("fifthactivity")
                Log.d("MainScreen_3", "Navigating to Fifth Screen")
            },
            modifier = Modifier.width(buttonWidth) // 设置按钮宽度
        ) {
            Text("Fifth Screen", style = commonTextStyle) // 按钮上的文本
        }
    }
}

@Preview
@Composable
fun MainScreenPreview_3() {
    MainScreen_3(navController = NavHostController(LocalContext.current), receivedMessage = "", mainScreenMessage = "") { }
}